<template>
    <div>
        <el-dialog :show-close="showClose" :draggable="true" v-model="show" :close-on-click-modal="false"
            :title="title" class="dialogClass" :top="top" :width="width" :show-cancel="showCancel">
            <div class="dialog-body">
                <slot></slot>
            </div>
        
    
    <template v-if="buttons && buttons.length > 0 || showCancel">
        <div class="dialog-footer">
            <el-button v-if="showCancel"  @click="close">
            取消
        </el-button>
            <el-button v-for="btn in buttons" :type="btn.type" @click="btn.click">
            {{ btn.text }}
        </el-button>
        </div>
        
    </template>
</el-dialog>
</div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false)
const props = defineProps({
    title: String,
    top: {
        type: String,
        default: "50px"
    },
    width: {
        type: String,
        default: "30%"
    },
    show:{
        type:Boolean,
        default:false
    },
    showCancel: {
        type: Boolean,
        default: true
    },
    showClose: {
        type: Boolean,
        default: true
    },
    buttons: {
        type: Array
    },
    dialogVisible: Boolean
})

const emit = defineEmits();

const close=()=>{
    emit("close")
}
</script>
<style lang="scss">
.dialogClass {
    .el-dialog__body {
        
        padding: 0px;
    }

    .dialog-body {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 20px;
        min-height: 80px;
    }
    .dialog-footer{
        text-align: right;
        padding: 5px 20px;
    }
}
</style>

  
  